자바스크립트 스타일 가이드

Airbnb 자바스크립트 스타일 가이드 2020-09-22#

no-whitespace-before-property 부터 eslint 레퍼런스를 읽었습니다.

파일 목록에 분류되어 있는 포스트는 eslint 를 읽고 업데이트 한 게시글 입니다.

Classes & Constructors#

클래스 사용 > 프로토타입 직접조작#

  • 클래스 문법은 더 간결하고, 쉽다.
// bad
function Queue(contents = []) {
this.queue = [...contents];
}
Queue.prototype.pop = function () {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
};
// good
class Queue {
constructor(contents = []) {
this.queue = [...contents];
}
pop() {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
}
}

상속: extends 사용#

  • extends
    • instanceof를 파괴하지 않고(?TODO) 프로포타입 상속을 위한 내장 방법
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
return this.queue[0];
};
// good
class PeekableQueue extends Queue {
peek() {
return this.queue[0];
}
}

클래스 메서드 체이닝: 메서드가 this 를 return#

// bad
Jedi.prototype.jump = function () {
this.jumping = true;
return true;
};
Jedi.prototype.setHeight = function (height) {
this.height = height;
};
const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined
// good
class Jedi {
jump() {
this.jumping = true;
return this;
}
setHeight(height) {
this.height = height;
return this;
}
}
const luke = new Jedi();
luke.jump()
.setHeight(20);

클래스의 커스텀 toString() 메서드#

  • 사용해도 되지만 성공적으로 작동하거나 사이드 이펙트가 없는지 확인해야 한다.
class Jedi {
constructor(options = {}) {
this.name = options.name || 'no name';
}
getName() {
return this.name;
}
toString() {
return `Jedi - ${this.getName()}`;
}
}

default 생성자#

  • 빈 constructor 는 생략해도 된다.
  • 빈 생성자를 가지는 클래스를 상속하는 클래스에서, 또한 빈 생성자를 가지고 있을 땐 constructor 를 써주지 않아도 된다.
// bad
class Jedi {
constructor() {}
getName() {
return this.name;
}
}
// bad
class Rey extends Jedi {
constructor(...args) {
super(...args);
}
}
class Jedi {
getName() {
return this.name;
}
}
class Rey extends Jedi { }
// good
class Rey extends Jedi {
constructor(...args) {
super(...args);
this.name = 'Rey';
}
}

중복된 클래스 멤버를 가지는 클래스 X#

  • 중복된 클래스 멤버 선언은. 클래스 멤버를 사용할 때 마지막 것을 선택한다.
  • 중복된 클래스 멤버를 가질 수 있는 것은 버그이다.
// bad
class Foo {
bar() { return 1; }
bar() { return 2; }
}
// good
class Foo {
bar() { return 1; }
}
// good
class Foo {
bar() { return 2; }
}

클래스 메서드에서 this 를 사용하지 않을 경우 : static 메서드 사용#

// bad
class Foo {
bar() {
console.log('bar');
}
}
// good - this 를 사용할 경우 -> 일반 메서드
class Foo {
bar() {
console.log(this.bar);
}
}
// good - constructor 를 생략할 수 있다.
class Foo {
constructor() {
// ...
}
}
// good - this 를 사용하지 않은 경우 -> static methods
class Foo {
static bar() {
console.log('bar');
}
}

Modules#

(import/export) > non-standard 모듈 시스템.#

  • (import/export) 를 쓰면 원하는 모듈 시스템으로 트랜스파일링 할 수 있다.
// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best 쓸 모듈의 라이브러리를 직접 명시하는 것이 좋음
import { es6 } from './AirbnbStyleGuide';
export default es6;

* wildcard import X#

  • default Export 인지 named export 인지 헷갈릴 수 있다.
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

from 으로 Import 후 직접적인 export X#

  • 간결하지만, export / import 의 일관성을 위해 분리한다.
// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

하나의 path : 하나의 import#

  • 하나의 path 에서 여러개의 import 를 쓴다면 유지보수가 어렵다.
// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
named1,
named2,
} from 'foo';

mutable: export X#

  • 특수한 경우를 제외하고 상수 reference 만 export 한다.
// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };

모듈에 export 가 하나만 있을 때: export default > named export#

  • 파일에 하나의 export 를 권장
    • 가독성, 유지보수에 낫다.
// bad
export function foo() {}
// good
export default function foo() {}

모든 import 는 non-import 명령문 위에 두기#

  • import 는 호이스팅 된다.
    • 호이스팅이 되는 것들은 아래에 두었을때 문제가 발생할 가능성이 있다는 말?
// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

여러줄의 imports : 들여쓰기(indent)#

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from 'path';

import 문: Webpack loader 구문 X#

  • import 에서 webpack 구문을 사용하면 코드를 모듈 번들러에 연결한다 (TODO 웹팩에 대한 지식 부족..)
  • webpack.config.js 에서 로더 구문을 사용하는 것이 좋다.
// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';
// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

import/extensions : 자바스크립트 파일이름 extensions X#

  • extensions 포함의 문제점.
    • 리팩토링이 금지된다.
      • (? TODO .js -> .jsx .. 등 js 관련 확장자를 다 수정해 줘야하는 문제점?)
// bad
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';
// good
import foo from './foo';
import bar from './bar';
import baz from './baz';

Iterators and Generators#

이터레이터 사용: 고차 함수 > 루프 for-in / for-of#

  • 고차 함수
    • 불변 규칙을 강제하기 위함이다.
    • 값을 리턴하는 순수 함수를 다루는 것이 더 쉽기 때문에 사이드 이펙트도 작을 수 있음.
  • 배열 순회
    • map()
    • every()
    • filter()
    • find()
    • findIndex()
    • reduce()
    • some() / ...
  • 객체 -> 배열
    • Object.keys()
    • Object.values()
    • Object.entries()
const numbers = [1, 2, 3, 4, 5];
// bad
let sum = 0;
for (let num of numbers) {
sum += num;
}
sum === 15;
// good
let sum = 0;
numbers.forEach((num) => {
sum += num;
});
sum === 15;
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
increasedByOne.push(numbers[i] + 1);
}
// good
const increasedByOne = [];
numbers.forEach((num) => {
increasedByOne.push(num + 1);
});
// best (keeping it functional)
const increasedByOne = numbers.map((num) => num + 1);

현재 제너레이터는 ES5 트랜스파일링이 잘 되지 않는다.#

제너레이터의 연산자의 적절한 공백 : function foo()#

  • function, * -> 같은 개념적 키워드
    • 는 함수에 대한 수정자가 아님
  • function * 은 함수와 다른 고유 한 구성임 ??
// bad
function * foo() {
// ...
}
// bad
const bar = function * () {
// ...
};
// bad
const baz = function *() {
// ...
};
// bad
const quux = function*() {
// ...
};
// bad
function*foo() {
// ...
}
// bad
function *foo() {
// ...
}
// very bad
function
*
foo() {
// ...
}
// very bad
const wat = function
*
() {
// ...
};
// good
function* foo() {
// ...
}
// good
const foo = function* () {
// ...
};

Properties#

프로퍼티 접근: dot 표기법 사용#

const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;

변수로 프로퍼티 접근 : [] 사용#

const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp('jedi');

지수 연산 : ** > Math.pow#

// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;

Variables#

변수 선언 : 항상 const / let#

  • const / let
    • 전역 변수가 생성되지 않는다.
    • 전역 변수 공간을 어지럽히면 안된다.
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

하나의 변수 선언/할당 : 하나의 const/let#

  • 새로 변수를 선언하고 추가할 때 더 쉽다.
  • 하나의 const/let 에 여러 변수를 나열하면, ; 와 , 을 고려해야 한다.
  • 디버그를 할 때, 한줄로 쓰면 한번에 뛰어넘는다.
    • 단계별로 관찰 할 수 없다.
// bad
const items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
goSportsTeam = true;
dragonball = 'z';
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

const/ let 의 그룹화#

  • 그룹화는, 나중에 이전에 할당 된 변수 중 하나에 따라 변수를 할당해야 할 때 유용합니다. (?TODO)
// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

합리적인 위치에 변수할당문 사용#

  • 필요한 위치 근처에 둔다.
  • let/const 은 block 스코프 이기 때문임.
// bad - unnecessary function call
function checkName(hasName) {
const name = getName();
if (hasName === 'test') {
return false;
}
if (name === 'test') {
this.setName('');
return false;
}
return name;
}
// good
function checkName(hasName) {
if (hasName === 'test') {
return false;
}
const name = getName();
if (name === 'test') {
this.setName('');
return false;
}
return name;
}

변수 할당문의 체이닝 X#

  • 변수 할당문의 체이닝은 암묵적으로 글로벌 변수를 만들어 낸다.
// bad
(function example() {
let a = b = c = 1;
// let a = ( b = ( c = 1 ) );
// let 은 a 에게만 적용된다.
// b 와 c 는 전역 변수가 된다.
}());
console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError
// `const` 도 마찬가지.

단항 증감 (++, --) X#

  • 단항 증감은 세미콜론 자동 삽입의 대상이 된다.
    • silent errors 의 원인이 될 수 있다.
  • num++ / num ++ 보다 num += 1 이 더 바람직하다.
  • 단항 증감을 사용하지 않으면,
    • pre-incrementing/pre-decrementing 실수를 방지할 수 있다.
// bad
const array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) {
let value = array[i];
sum += value;
if (value) {
truthyCount++;
}
}
// good
const array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;
const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;

= 할당문 전후로 줄바꿈 X, 줄바꿈이 필요하다면 () 사용#

  • 할당문 전후로 줄바꿈이 발생하면 난독화를 일으킬 수 있다.
// bad
const foo =
superLongLongLongLongLongLongLongLongFunctionName();
// bad
const foo
= 'superLongLongLongLongLongLongLongLongString';
// good
const foo = (
superLongLongLongLongLongLongLongLongFunctionName()
);
// good
const foo = 'superLongLongLongLongLongLongLongLongString';

사용하지 않은 변수는 비허용된다.#

  • 선언되었지만 사용되지 않은 변수는 리팩토링이 완전하게 되지 않았다는 의미이다.
  • 코드 공간을 불필요하게 차지함.
  • 읽는 사람에게 혼동을 줌.
// bad
var some_unused_var = 42;
// y 는 쓰여지기만 했지 사용되지 않았다.
var y = 10;
y = 5;
// 사용되지 않은 변수
var z = 0;
z = z + 1;
// 사용되지 않은 함수
function getX(x, y) {
return x;
}
// good
function getXPlusY(x, y) {
return x + y;
}
var x = 1;
var y = a + 2;
alert(getXPlusY(x, y));
// 나머지 프로퍼티 연산자: 객체에서 특정 키를 의도적으로 빠뜨리고 추출하는 방법이다.
// 'type' 은 사용하지 않아도 괜찮다.
var { type, ...coords } = data;
// 'coords' 는 data 객체에서 'type' 프로퍼티가 빠진 객체다.

Hoisting#

var, const/let 선언의 호이스팅:#

  • var
    • 선언문은 가장 가까운 함수 스코프의 최상단으로 호이스팅 된다.
    • 할당문은 호이스팅 되지 않는다.
  • const/let
    • 선언에는 Temporal Dead Zones (TDZ) 가 존재한다.
    • typeof 는 안전하지 않다. (예시 참고)
// 아래 함수는 참조 에러를 일으킨다 (notDefined 라는 전역 변수가 존재하지 않을 때)
function example() {
console.log(notDefined); // => throws a ReferenceError
}
// declaredButNotAssigned 는 호이스팅이 일어나기 때문에 사용가능하다.
// Note: 하지만 true 할당은 호이스팅 되지 않음.
function example() {
console.log(declaredButNotAssigned); // => undefined
var declaredButNotAssigned = true;
}
// 인터프리터는 변수의 선언을 스코프의 최상단으로 호이스팅 한다.
function example() {
let declaredButNotAssigned;
console.log(declaredButNotAssigned); // => undefined
declaredButNotAssigned = true;
}
// const / let 의 예시
function example() {
console.log(declaredButNotAssigned); // => throws a ReferenceError
console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
const declaredButNotAssigned = true;
}

14.2 익명함수 표현식의 호이스팅 : 변수 이름 O, 함수할당 X#

function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function () {
console.log('anonymous function expression');
};
}

이름있는 함수 표현식의 호이스팅: 변수이름 O, 함수이름과 body X#

function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
superPower(); // => ReferenceError superPower is not defined
var named = function superPower() {
console.log('Flying');
};
}
// 할당된 변수이름과 함수 표현식의 이름기 같은 경우.
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
var named = function named() {
console.log('named');
};
}

함수 선언문의 호이스팅: 함수 이름, body O#

function example() {
superPower(); // => Flying
function superPower() {
console.log('Flying');
}
}

Comparison Operators & Equality#

(===) (!==) > (==)#

Conditional statements#

if 와 같은 조건문

  • ToBoolean 의 추상 메서드로 강제변환을 사용하여 식을 평가한다.
  • 식을 평가하는 규칙은 다음과 같다.
    • Objects -> true
    • Undefined -> false
    • Null -> false
    • Booleans -> true / false
    • Numbers
      • false : +0, -0, NaN
      • otherwise true
    • Strings
      • false : empty string ''
      • otherwise true
if ([0] && []) {
// true
// 배열은 객체이다. 빈객체도 객체임
// 객체는 항상 true
}

reference: boolean -> 축약 , 문자열/숫자 -> 명시적 비교#

// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}

Truth Equality and JavaScript by Angus Croll.🔗#

어휘 선언이 있는 case/default 문 : { } braces 사용#

  • Lexical declarations [어휘 선언]
    • let, const, function, and class
    • 스위치 블록 스코프가 존재한다.
    • case/default 에 { } 가 없다면 여러 case 절에서 동일한 것을 정의하려고 할 때 문제가 발생함.
// bad
switch (foo) {
case 1:
let x = 1;
break;
case 2:
const y = 2;
break;
case 3:
function f() {
// ...
}
break;
default:
class C {}
}
switch (1) {
case 1:
let v ;
break;
case 2:
let v; // Uncaught SyntaxError: Identifier 'v' has already been declared
break;
case 3:
function f() {
// ...
}
break;
default:
class C {}
}
// good
switch (foo) {
case 1: {
let x = 1;
break;
}
case 2: {
const y = 2;
break;
}
case 3: {
function f() {
// ...
}
break;
}
case 4:
bar();
break;
default: {
class C {}
}
}

삼항의 중첩 X : 기본적으로 단일행 표현식#

// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// split into 2 separated ternary(삼항) expressions
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

불필요한 삼항 표현식 X#

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;

혼합 연산자 : () 로 감싸기#

  • 혼합연산자는 우선순위가 모호할 수 있다.
  • +, -, ** 는 예외
  • /, * 는 모호 하다.
// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
const bar = a ** b - 5 % d;
// bad
// (a || b) && c 와 혼동될 수 있다.
if (a || b && c) {
return d;
}
// bad
const bar = a + b / c * d;
// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
// good
const bar = a ** b - (5 % d);
// good
if (a || (b && c)) {
return d;
}
// good
const bar = a + (b / c) * d;

Blocks#

여러줄의 블록 : {} 사용#

// bad
if (test)
return false;
// good
if (test) return false;
// good
if (test) {
return false;
}
// bad
function foo() { return false; }
// good
function bar() {
return false;
}

if/else 여러줄 블록 : if 의 닫기 } 와 같은 줄에 else 두기#

// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}
// good
if (test) {
thing1();
thing2();
} else {
thing3();
}

return 을 포함하는 if 블록 + else/else if#

  • return 을 포함하는 if 블록
    • 후속 else 불필요
    • 후속 else if 의 리턴 -> if 리턴으로 분리
// bad
function foo() {
if (x) {
return x;
} else {
return y;
}
}
// good
function foo() {
if (x) {
return x;
}
return y;
}
// bad
function cats() {
if (x) {
return x;
} else if (y) {
return y;
}
}
// good
function cats() {
if (x) {
return x;
}
if (y) {
return y;
}
}
// bad
function dogs() {
if (x) {
return x;
} else {
if (y) {
return y;
}
}
}
// good
function dogs(x) {
if (x) {
if (z) {
return y;
}
} else {
return z;
}
}

Control Statements#

  • if, while etc

제어문의 아주 긴 조건 : 줄바꿈, 논리연산은 새 줄에 시작#

  • 연산을 새 줄에 시작하는 것
    • 메서드 체이닝 패턴
    • 가독성
// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
thing1();
}
// bad
if (foo === 123 &&
bar === 'abc') {
thing1();
}
// bad
if (foo === 123
&& bar === 'abc') {
thing1();
}
// bad
if (
foo === 123 &&
bar === 'abc'
) {
thing1();
}
// good
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
// good
if (
(foo === 123 || bar === 'abc')
&& doesItLookGoodWhenItBecomesThatLong()
&& isThisReallyHappening()
) {
thing1();
}
// good
if (foo === 123 && bar === 'abc') {
thing1();
}

제어문 > 선택 연산자#

// bad
!isRunning && startRunning();
// good
if (!isRunning) {
startRunning();
}

Comments#

멀티라인 주석 /* ... / > //#

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

// : 한줄 주석#

  • 주석의 대상 위에 한줄로 표기
  • 주석 위에는 한 줄 비우기
    • 주석이 블록이 첫줄이 아닌경우 제외
// bad
const active = true; // is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// also good
function getType() {
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}

주석의 시작은 항상 공백#

  • 가독성
// bad
//is current tab
const active = true;
// good
// is current tab
const active = true;
// bad
/**
*make() returns a new element
*based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

FIXME / TODO#

  • 실행 가능한 주석
  • FIXME: 재검토해야 할 문제를 지적
  • TODO: 구현해야하는 문제
class Calculator extends Abacus {
constructor() {
super();
// FIXME: 여기서 전역을 사용해서는 안됩니다.
total = 0;
}
}
class Calculator extends Abacus {
constructor() {
super();
// TODO: total은 옵션 매개 변수로 구성 할 수 있어야합니다.
this.total = 0;
}
}

Whitespace#

들여쓰기 indent : 2 space character#

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

space-before-blocks: 여는 { 의 앞에 공백 하나#

// bad
function test(){
console.log('test');
}
// good
function test() {
console.log('test');
}
// bad
dog.set('attr',{
age: '1 year',
breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
age: '1 year',
breed: 'Bernese Mountain Dog',
});

keyword-spacing : 제어문과 함수의 호출/선언#

  • 제어문 : 여는 ( 앞에 공백 하나
  • 함수 호출/선언: 여는 ( 앞에 공백 X
// bad
if(isJedi) {
fight ();
}
// good
if (isJedi) {
fight();
}
// bad
function fight () {
console.log ('Swooosh!');
}
// good
function fight() {
console.log('Swooosh!');
}

space-infix-ops : 연산자 사이 공백#

// bad
const x=y+5;
// good
const x = y + 5;

eol-last : 파일 마지막 - 하나의 newline(개행) 문자로 끝내기#

  • 비어 있지 않은 파일의 후행 줄 바꿈은 일반적인 UNIX 관용구입니다.
  • 후행 줄 바꿈의 이점은 쉘 프롬프트를 방해하지 않고 파일 및 출력 파일을 터미널에 연결하거나 추가하는 기능을 포함합니다.
// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;
// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;
↵
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;↵

newline-per-chained-call 체이닝 마다 개행#

  • 긴 메서드 체이닝 (2개이상)
    • 들여쓰기
    • . dot 으로 시작하기
      • . 으로 시작하는 것 새로운 문이 아닌 메서드 호출이라는 것을 강조할 수 있다.
// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();
// bad
$('#items').
find('.selected').
highlight().
end().
find('.open').
updateCount();
// good
$('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();
// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
.attr('width', (radius + margin) * 2).append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led').data(data);

no-whitespace-before-property 🔗 프로퍼티 앞에 공백 X#

  • javascript 는 객체와 속성 사이의 공백을 허용한다.
    • 가독성을 저하하고 오류를 유발할 수 있다.
foo. bar .baz . quz
  • 점 주위 (), [] 괄호 앞에 공백을 쓰지 않아야 된다.
  • 체이닝의 개행에서만 허용 한다.
foo
.bar()
.baz()
.qux()
/*eslint no-whitespace-before-property: "error"*/
foo [bar] // foo.bar
foo. bar // foo[bar]
foo .bar // foo[ bar ]
foo. bar. baz // foo.bar.baz
foo. bar() // foo
.baz() // .bar().baz()
foo
.bar(). baz()
/*
foo
.bar()
.baz()
foo.
bar().
baz()
*/

블록 다음/ 다음 statement 앞 : 빈 줄#

if (foo) {
return bar;
}
return baz;
// good
if (foo) {
return bar;
}
return baz;
// bad
const obj = {
foo() {
},
bar() {
},
};
return obj;
// good
const obj = {
foo() {
},
bar() {
},
};
return obj;
// bad
const arr = [
function foo() {
},
function bar() {
},
];
return arr;
// good
const arr = [
function foo() {
},
function bar() {
},
];
return arr;

padded-blocks: 블록을 빈 줄로 채우지 말것#

// bad
function bar() {
console.log(foo);
}
// bad
if (baz) {
console.log(qux);
} else {
console.log(foo);
}
// bad
class Foo {
constructor(bar) {
this.bar = bar;
}
}
// good
function bar() {
console.log(foo);
}
// good
if (baz) {
console.log(qux);
} else {
console.log(foo);
}

no-multiple-empty-lines: 멀티라인 빈줄 X#

  • 공백은 코드의 논리적 섹션을 분리하는데 유용하지만 과도한 공백은 화면을 더 많이 차지 한다.
  • 코드를 읽을 때 필요한 스크롤을 줄이는 것을 목표로 한다.
// bad
class Person {
constructor(fullName, email, birthday) {
this.fullName = fullName;
this.email = email;
this.setAge(birthday);
}
setAge(birthday) {
const today = new Date();
const age = this.getAge(today, birthday);
this.age = age;
}
getAge(today, birthday) {
// ..
}
}
// good
class Person {
constructor(fullName, email, birthday) {
this.fullName = fullName;
this.email = email;
this.setAge(birthday);
}
setAge(birthday) {
const today = new Date();
const age = getAge(today, birthday);
this.age = age;
}
getAge(today, birthday) {
// ..
}
}

space-in-parens : ( ) 안에 공백 X#

// bad
function bar( foo ) {
return foo;
}
// good
function bar(foo) {
return foo;
}
// bad
if ( foo ) {
console.log(foo);
}
// good
if (foo) {
console.log(foo);
}
// bad
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
// good
foo('bar');
var x = (1 + 2) * 3;

array-bracket-spacing : [ ] 안에 공백 X#

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
// good
const foo = [1, 2, 3];
console.log(foo[0]);

object-curly-spacing : { } 안에 공백 O#

// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };

한줄에 100 자(공백 포함) 이상 X#

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
// good
const foo = jsonData
&& jsonData.foo
&& jsonData.foo.bar
&& jsonData.foo.bar.baz
&& jsonData.foo.bar.baz.quux
&& jsonData.foo.bar.baz.quux.xyzzy;
// good
$.ajax({
method: 'POST',
url: 'https://airbnb.com/',
data: { name: 'John' },
})
.done(() => console.log('Congratulations!'))
.fail(() => console.log('You have failed this city.'));

block-spacing : { 와 } 가 같은줄 : braces 내부 전후로 공백#

// bad
function foo() {return true;}
if (foo) { bar = 0;}
// good
function foo() { return true; }
if (foo) { bar = 0; }

comma-spacing : , 전에 공백 X / , 후 공백 O#

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];
// good
var foo = 1, bar = 2;
var arr = [1, 2];

computed-property-spacing : 공백의 일관성#

  • 계산된 속성 : 공백을 넣거나 빼거나 둘중 하나로 통일해야 한다.
// bad
obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]
// good
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]

func-call-spacing : 함수 호출 공백 X#

// bad
func ();
func
();
// good
func();

key-spacing : 키 공백#

  • 개체 리터럴 속성에서 키와 값 사이의 간격
    • 키는 붙이고 value 는 띄운다.
// bad
var obj = { foo : 42 };
var obj2 = { foo:42 };
// good
var obj = { foo: 42 };

no-trailing-spaces : 줄 끝 후행 공백 X#

  • 후행 공백 : 공백, 탭 및 기타 유니 코드 공백 문자
  • 소스 제어 시스템에서 diff 로 플래그가 지정되는 문제점.
// bad
var foo = 0;//•••••
var baz = 5;//••
// good
var foo = 0;
var baz = 5;

no-multiple-empty-lines : 빈 멀티라인 X#

  • 오직 파일 끝 한줄의 개행 문자만 허용됨.
  • 파일 시작에 개행 문자 X
// bad - 빈 멀티라인
var x = 1;
var y = 2;
// bad - 파일끝에 두 줄 이상의 개행문자
var x = 1;
var y = 2;
// bad - 파일 시작에 하나 이상의 개행문자
var x = 1;
var y = 2;
// good
var x = 1;
var y = 2;

Commas#

Reference & Origin#

https://github.com/airbnb/javascript 있는 포스트는 eslint 를 읽고 업데이트 한 게시글 입니다.

Arrays#

배열 생성: 리터럴 문법 []#

// bad
const items = new Array();
// good
const items = [];

배열의 items 생성 : push#

const someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');

배열 복사 : ... spread operator#

// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

iterable 객체 -> 배열 : spreads ... > Array.from.#

const foo = document.querySelectorAll('.foo');
// good
const nodes = Array.from(foo);
// best
const nodes = [...foo];

iterable 객체 document.querySelectorAll('.foo') 의 __proto__ 는 NodeList

array-like 객체 -> 배열 : Array.from#

let arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
/*
Object
0: "foo"
1: "bar"
2: "baz"
length: 3
__proto__: Object
*/
// bad
const arr = Array.prototype.slice.call(arrLike);
// good
const arr = Array.from(arrLike); // ["foo", "bar", "baz"]
let arrLike = { '0': 'foo', 1: 'bar', 2: 'baz', length: 3 };
Array.from(arrLike); // ["foo", "bar", "baz"]
arrLike = { '212': 'foo', 1: 'bar', 2: 'baz', length: 3 };
Array.from(arrLike); // [undefined, "bar", "baz"]

유사 배열의 조건

  1. length 프로퍼티가 존재.
  2. index 번호가 0번부터 시작해서 1씩증가.

iterable map : Array.from > spread ...#

Array.from 은 중간에 배열을 생성하는 것을 방지한다.

const bar = (v) => v + 1;
const foo = [1, 2, 3];
// bad
const baz = [...foo].map(bar); // [2, 3, 4]
// good
const baz = Array.from(foo, bar) // [2, 3, 4]

배열 메서드의 callback 에서 return 문을 사용해야 한다#

// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => x + 1);
// bad - callback 에서 return 문을 쓰지 않으면, 첫 이터레이션 이후 `acc` 의 값은 undefined 가 된다.
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
const flatten = acc.concat(item);
});
// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
const flatten = acc.concat(item);
return flatten;
});
// bad
inbox.filter((msg) => {
const { subject, author } = msg;
if (subject === 'Mockingbird') {
return author === 'Harper Lee';
} else {
return false;
}
});
// good
inbox.filter((msg) => {
const { subject, author } = msg;
if (subject === 'Mockingbird') {
return author === 'Harper Lee';
}
return false;
});

여러 줄이있는 배열의 줄바꿈: 괄호를 열때, 닫기전 사용#

// bad
const arr = [
[0, 1], [2, 3], [4, 5],
];
const objectInArray = [{
id: 1,
}, {
id: 2,
}];
const numberInArray = [
1, 2,
];
// good
const arr = [[0, 1], [2, 3], [4, 5]];
const objectInArray = [
{
id: 1,
},
{
id: 2,
},
];
const numberInArray = [
1,
2,
];

Destructuring#

객체 다중 프로퍼티 사용 : destructuring#

  • 임시 references 생성을 줄여준다.
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
const { firstName, lastName } = user;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}

배열 destructuring#

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

리턴값이 여러개 일 때 : 객체 비구조화 > 배열 비구조화#

  • 객체 비구조화는, 추후에 코드에 새 속성을 추가 할 수 있다.
  • 리턴 값을 순서에 상관없이 가져올 수 있다.
  • 호출 할 때, 원하는 data 를 선택할 수 있다.
// bad
function processInput(input) {
// then a miracle occurs
return [left, right, top, bottom];
}
// 호출을 할 때 반환값의 순서를 고려해야 하는 문제가 있다.
const [left, __, top] = processInput(input);
// good
function processInput(input) {
// then a miracle occurs
return { left, right, top, bottom };
}
// 호출 할 때, 원하는 data 를 선택할 수 있다.
const { left, top } = processInput(input);

Strings#

문자열: single quotes ''#

// bad
const name = "Capt. Janeway";
// bad - template literals: 줄바꿈, interpolation 일때 사용
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';

100 자가 넘는 문자열: \,+ 으로 끊지 말것.#

  • 끊어진 문자열 : 작업하기가 힘들고 코드를 검색하기 어렵게 만든다.
// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// bad
const errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';
// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

계산된 문자열을 만들 때 : 탬플릿 스트링 > +#

  • Template 스트링
    • 가독성
    • 줄 바꿈 -> 엔터
    • interpolation {something} ( 블록이 아님)
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}

문자열 eval() 사용 말것 : 많은 취약점#

문자열 escape characters : Backslashes -> template string#

  • Backslashes 은 가독성 저하
  • template string 으로 backslash 를 줄일 수 있다.
// bad
const foo = '\'this\' \i\s \"quoted\"';
// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;

Functions#

이름있는 함수 표현식 > 함수 선언식#

  • 함수 선언식
    • 함수 선언이 호이스트된다. (TODO airbnb 스타일 가이드에서의 호이스팅의 의미가 다른가?)
    • 파일에서 함수가 정의되기 전에 함수를 참조할 수 있다
    • 가독성과 유지 보수성을 해친다.
    • 함수의 정의가 파일의 나머지 부분을 이해하는 데 방해가 될만큼 충분히 크거나 복잡하다면 -> 모듈로 추출
  • 이름있는 함수 표현식
    • This eliminates any assumptions made about the Error’s call stack.
    • 에러 콜스택에서의 가정(유추해야 하는일)을 없앤다? 에러를 더 잘찾아낼 수 있다라는 의미로 해석.
// bad
function foo() {
// ...
}
// bad
const foo = function () {
// ...
};
// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
// ...
};

IIFE: parentheses 으로 감싸기#

  • 모듈 시스템에서의 IIFE 는 거의 사용되지 않는다.
// immediately-invoked function expression (IIFE)
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());

비함수블럭에서 함수 선언 X -> 변수에 함수 할당.#

  • non-function block : if, while, etc
  • 브라우저마다 비함수블럭에서의 함수블럭 해석을 다르게 한다.

ECMA-262, block : statements(명령문), 함수선언 : not statements#

// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}

매개변수에 arguments 사용 X#

  • 함수의 arguments 프로퍼티보다 매개변수의 arguments 가 우선시 된다.
// bad
function foo(name, options, arguments) {
// ...
}
// good
function foo(name, options, args) {
// ...
}

rest syntax ... > arguments X#

  • 함수에서 arguments 은 절대 사용하지 말것.
  • 나머지 인수는 유사배열이 아닌 실제 배열이다.
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}

default parameter syntax > 함수 인자 변경#

// really bad
function handleThings(opts) {
// 절대 함수의 인자를 변경해선 안된다.
// opts 가 거짓이면 원하는 객체로 설정되지만 미묘한 버그가 발생할 수 있습니다.
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}

사이드 이펙트를 유발하는 default parameter 사용 말것.#

var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3

default parameters 는 마지막에 적는다.#

// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}

함수 객체 생성 : 함수 생성자 X#

  • 생성자로 함수 생성
    • 문자열을 'eval()' 와 유사하게 평가한다. (TODO 'return a + b' 이 eval 와 유사하게 평가될 수 있다는 의미인가?)
    • 취약점
// bad
var add = new Function('a', 'b', 'return a + b');
// still bad
var subtract = Function('a', 'b', 'return a - b');

함수 시그니처의 space 유지#

  • 함수시그니처
    • functions 그리고 methods 의 입력과 출력을 정의
  • 일관성
  • 이름 추가/제거 -> 공백 추가/제거 의 동작을 안해도됨
// bad
const f = function(){};
const g = function (){};
const h = function() {};
const a = function a() {};
// good
const x = function () {};
const y = function a() {};

매개 변수로 전달 된 객체 조작 금지#

  • 함수의 (original)caller 에게 변수 부작용의 가능성.
// bad
function f1(obj) {
obj.key = 1;
}
// good
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}

매개변수 재할당 금지#

  • 매개변수 재할당
    • arguments 객체 접근 -> 예기치 않은 행동 발생
    • 최적화 이슈, especially in V8.
// bad
function f1(a) {
a = 1;
// ...
}
function f2(a) {
if (!a) { a = 1; }
// ...
}
// good
function f3(a) {
const b = a || 1;
// ...
}
function f4(a = 1) {
// ...
}

가변 함수 : spread operator ... > apply#

  • variadic functions (가변 함수)
    • 가변 개수의 인수 허용
  • apply 메서드로 context(this) 를 제공해 줄 필요 없어 깨끗하다.
  • apply 메서드를 한번 더 적용하기 힘들다.
// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);
// good
const x = [1, 2, 3, 4, 5];
console.log(...x);
// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));
// good
new Date(...[2016, 8, 5]);

함수의 여러줄의 시그니쳐/호출 : 들여쓰기, 한줄에 하나씩#

// bad
function foo(bar,
baz,
quux) {
// ...
}
// good
function foo(
bar,
baz,
quux,
) {
// ...
}
// bad
console.log(foo,
bar,
baz);
// good
console.log(
foo,
bar,
baz,
);

Arrow Functions#

익명 함수: 화살표함수 사용#

  • 익명 함수를 사용해야 할 때 중 하나는 인라인 콜백(inline callback)을 사용할 때 이다.
  • 화살표 함수의 함수의 실행 문맥(this)은 함수를 호출한 곳의 컨텍스트(this) 를 이어받을 수 있다.
    • 만약 function 키워드를 사용한 익명함수를 인라인 콜백에서 썼을 경우의 this 는 실행컨텍스트를 예측하기가 어렵다.
  • 화살표 함수는 간결하다.
  • 만약 인라인 콜백이 복잡하여 졌을 때, 콜백의 로직을 함수 외부에 선언하는 작업이 필요해 질 것이다.
    • 이 때 외부에서, reference 에 함수 표현식을 할당하면, 인라인 콜백 대신 reference 로 대신할 수 있다.
// bad
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});

명령문이 1개인 화살표 함수 : 중괄호 생략 -> 암시적 반환#

  • 중괄호를 사용해야 하는경우 반환을 하기 위해선 return 문을 써야 한다.
  • Syntactic sugar : 가독성
// bad
[1, 2, 3].map((number) => {
const nextNumber = number + 1;
`A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map((number) => `A string containing the ${number + 1}.`);
// good
[1, 2, 3].map((number) => {
const nextNumber = number + 1;
return `A string containing the ${nextNumber}.`;
});
// good : obj 를 중괄호 없이 리턴하고 싶을땐, obj 를 () 으로 감싼다.
[1, 2, 3].map((number, index) => ({
[index]: number,
}));
// 일반함수는 암시적 리턴이 없다. side effect 가 있을 수 있다?
function foo(callback) {
const val = callback();
if (val === true) {
// Do something if callback returns true
}
}
let bool = false;
// bad , 'bool = true' 명령문의 결과값을 반환할 의도가 없기 때문에 중괄호 생략으로 한줄로 작성하는 것은 부적절 하다.
foo(() => bool = true);
// good
foo(() => {
bool = true;
});

여러줄로 이뤄진 1개의 명령문의 암시적 반환: () 으로 감싼다.#

  • 함수의 시작과 끝을 명확히 할 수 있다.
// bad
['get', 'post', 'put'].map((httpMethod) => Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod,
)
);
// good
['get', 'post', 'put'].map((httpMethod) => (
Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod,
)
));

화살표 함수의 인자: 항상 () 로 감싸기#

  • 명확성, 일관성
  • 새로운 인자를 첨삭할 때 () 의 변동을 줄여준다.
    • x -> (x, y) , 혹은 그 반대를 하면 () 의 변동이 있다.
// bad
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map((x) => x * x);
// bad
[1, 2, 3].map(number => (
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// good
[1, 2, 3].map((number) => (
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// bad
[1, 2, 3].map(x => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});

화살표함수의 (=>) 와 비교 연산자 (<=, >=) 의 혼동 : 명령문을 () 로 감싼다.#

// bad
const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;
// bad
const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;
// good
const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);
// good
const itemHeight = (item) => {
const { height, largeSize, smallSize } = item;
return height <= 256 ? largeSize : smallSize;
};

암시적 반환할 때, body 의 위치#

// bad
(foo) =>
bar;
(foo) =>
(bar);
// good
(foo) => bar;
(foo) => (bar);
(foo) => (
bar
)

Classes & Constructors#

클래스 사용 > 프로토타입 직접조작#

  • 클래스 문법은 더 간결하고, 쉽다.
// bad
function Queue(contents = []) {
this.queue = [...contents];
}
Queue.prototype.pop = function () {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
};
// good
class Queue {
constructor(contents = []) {
this.queue = [...contents];
}
pop() {
const value = this.queue[0];
this.queue.splice(0, 1);
return value;
}
}

상속: extends 사용#

  • extends
    • instanceof를 파괴하지 않고(?TODO) 프로포타입 상속을 위한 내장 방법
// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
return this.queue[0];
};
// good
class PeekableQueue extends Queue {
peek() {
return this.queue[0];
}
}

클래스 메서드 체이닝: 메서드가 this 를 return#

// bad
Jedi.prototype.jump = function () {
this.jumping = true;
return true;
};
Jedi.prototype.setHeight = function (height) {
this.height = height;
};
const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined
// good
class Jedi {
jump() {
this.jumping = true;
return this;
}
setHeight(height) {
this.height = height;
return this;
}
}
const luke = new Jedi();
luke.jump()
.setHeight(20);

클래스의 커스텀 toString() 메서드#

  • 사용해도 되지만 성공적으로 작동하거나 사이드 이펙트가 없는지 확인해야 한다.
class Jedi {
constructor(options = {}) {
this.name = options.name || 'no name';
}
getName() {
return this.name;
}
toString() {
return `Jedi - ${this.getName()}`;
}
}

default 생성자#

  • 빈 constructor 는 생략해도 된다.
  • 빈 생성자를 가지는 클래스를 상속하는 클래스에서, 또한 빈 생성자를 가지고 있을 땐 constructor 를 써주지 않아도 된다.
// bad
class Jedi {
constructor() {}
getName() {
return this.name;
}
}
// bad
class Rey extends Jedi {
constructor(...args) {
super(...args);
}
}
class Jedi {
getName() {
return this.name;
}
}
class Rey extends Jedi { }
// good
class Rey extends Jedi {
constructor(...args) {
super(...args);
this.name = 'Rey';
}
}

중복된 클래스 멤버를 가지는 클래스 X#

  • 중복된 클래스 멤버 선언은. 클래스 멤버를 사용할 때 마지막 것을 선택한다.
  • 중복된 클래스 멤버를 가질 수 있는 것은 버그이다.
// bad
class Foo {
bar() { return 1; }
bar() { return 2; }
}
// good
class Foo {
bar() { return 1; }
}
// good
class Foo {
bar() { return 2; }
}

클래스 메서드에서 this 를 사용하지 않을 경우 : static 메서드 사용#

// bad
class Foo {
bar() {
console.log('bar');
}
}
// good - this 를 사용할 경우 -> 일반 메서드
class Foo {
bar() {
console.log(this.bar);
}
}
// good - constructor 를 생략할 수 있다.
class Foo {
constructor() {
// ...
}
}
// good - this 를 사용하지 않은 경우 -> static methods
class Foo {
static bar() {
console.log('bar');
}
}

Modules#

(import/export) > non-standard 모듈 시스템.#

  • (import/export) 를 쓰면 원하는 모듈 시스템으로 트랜스파일링 할 수 있다.
// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;
// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;
// best 쓸 모듈의 라이브러리를 직접 명시하는 것이 좋음
import { es6 } from './AirbnbStyleGuide';
export default es6;

* wildcard import X#

  • default Export 인지 named export 인지 헷갈릴 수 있다.
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';
// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

from 으로 Import 후 직접적인 export X#

  • 간결하지만, export / import 의 일관성을 위해 분리한다.
// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';
// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

하나의 path : 하나의 import#

  • 하나의 path 에서 여러개의 import 를 쓴다면 유지보수가 어렵다.
// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
named1,
named2,
} from 'foo';

mutable: export X#

  • 특수한 경우를 제외하고 상수 reference 만 export 한다.
// bad
let foo = 3;
export { foo };
// good
const foo = 3;
export { foo };

모듈에 export 가 하나만 있을 때: export default > named export#

  • 파일에 하나의 export 를 권장
    • 가독성, 유지보수에 낫다.
// bad
export function foo() {}
// good
export default function foo() {}

모든 import 는 non-import 명령문 위에 두기#

  • import 는 호이스팅 된다.
    • 호이스팅이 되는 것들은 아래에 두었을때 문제가 발생할 가능성이 있다는 말?
// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

여러줄의 imports : 들여쓰기(indent)#

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
longNameA,
longNameB,
longNameC,
longNameD,
longNameE,
} from 'path';

import 문: Webpack loader 구문 X#

  • import 에서 webpack 구문을 사용하면 코드를 모듈 번들러에 연결한다 (TODO 웹팩에 대한 지식 부족..)
  • webpack.config.js 에서 로더 구문을 사용하는 것이 좋다.
// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';
// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

import/extensions : 자바스크립트 파일이름 extensions X#

  • extensions 포함의 문제점.
    • 리팩토링이 금지된다.
      • (? TODO .js -> .jsx .. 등 js 관련 확장자를 다 수정해 줘야하는 문제점?)
// bad
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';
// good
import foo from './foo';
import bar from './bar';
import baz from './baz';

Iterators and Generators#

이터레이터 사용: 고차 함수 > 루프 for-in / for-of#

  • 고차 함수
    • 불변 규칙을 강제하기 위함이다.
    • 값을 리턴하는 순수 함수를 다루는 것이 더 쉽기 때문에 사이드 이펙트도 작을 수 있음.
  • 배열 순회
    • map()
    • every()
    • filter()
    • find()
    • findIndex()
    • reduce()
    • some() / ...
  • 객체 -> 배열
    • Object.keys()
    • Object.values()
    • Object.entries()
const numbers = [1, 2, 3, 4, 5];
// bad
let sum = 0;
for (let num of numbers) {
sum += num;
}
sum === 15;
// good
let sum = 0;
numbers.forEach((num) => {
sum += num;
});
sum === 15;
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
increasedByOne.push(numbers[i] + 1);
}
// good
const increasedByOne = [];
numbers.forEach((num) => {
increasedByOne.push(num + 1);
});
// best (keeping it functional)
const increasedByOne = numbers.map((num) => num + 1);

현재 제너레이터는 ES5 트랜스파일링이 잘 되지 않는다.#

제너레이터의 연산자의 적절한 공백 : function foo()#

  • function, * -> 같은 개념적 키워드
    • 는 함수에 대한 수정자가 아님
  • function * 은 함수와 다른 고유 한 구성임 ??
// bad
function * foo() {
// ...
}
// bad
const bar = function * () {
// ...
};
// bad
const baz = function *() {
// ...
};
// bad
const quux = function*() {
// ...
};
// bad
function*foo() {
// ...
}
// bad
function *foo() {
// ...
}
// very bad
function
*
foo() {
// ...
}
// very bad
const wat = function
*
() {
// ...
};
// good
function* foo() {
// ...
}
// good
const foo = function* () {
// ...
};

Properties#

프로퍼티 접근: dot 표기법 사용#

const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;

변수로 프로퍼티 접근 : [] 사용#

const luke = {
jedi: true,
age: 28,
};
function getProp(prop) {
return luke[prop];
}
const isJedi = getProp('jedi');

지수 연산 : ** > Math.pow#

// bad
const binary = Math.pow(2, 10);
// good
const binary = 2 ** 10;

Variables#

변수 선언 : 항상 const / let#

  • const / let
    • 전역 변수가 생성되지 않는다.
    • 전역 변수 공간을 어지럽히면 안된다.
// bad
superPower = new SuperPower();
// good
const superPower = new SuperPower();

하나의 변수 선언/할당 : 하나의 const/let#

  • 새로 변수를 선언하고 추가할 때 더 쉽다.
  • 하나의 const/let 에 여러 변수를 나열하면, ; 와 , 을 고려해야 한다.
  • 디버그를 할 때, 한줄로 쓰면 한번에 뛰어넘는다.
    • 단계별로 관찰 할 수 없다.
// bad
const items = getItems(),
goSportsTeam = true,
dragonball = 'z';
// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
goSportsTeam = true;
dragonball = 'z';
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

const/ let 의 그룹화#

  • 그룹화는, 나중에 이전에 할당 된 변수 중 하나에 따라 변수를 할당해야 할 때 유용합니다. (?TODO)
// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

합리적인 위치에 변수할당문 사용#

  • 필요한 위치 근처에 둔다.
  • let/const 은 block 스코프 이기 때문임.
// bad - unnecessary function call
function checkName(hasName) {
const name = getName();
if (hasName === 'test') {
return false;
}
if (name === 'test') {
this.setName('');
return false;
}
return name;
}
// good
function checkName(hasName) {
if (hasName === 'test') {
return false;
}
const name = getName();
if (name === 'test') {
this.setName('');
return false;
}
return name;
}

변수 할당문의 체이닝 X#

  • 변수 할당문의 체이닝은 암묵적으로 글로벌 변수를 만들어 낸다.
// bad
(function example() {
let a = b = c = 1;
// let a = ( b = ( c = 1 ) );
// let 은 a 에게만 적용된다.
// b 와 c 는 전역 변수가 된다.
}());
console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError
// `const` 도 마찬가지.

단항 증감 (++, --) X#

  • 단항 증감은 세미콜론 자동 삽입의 대상이 된다.
    • silent errors 의 원인이 될 수 있다.
  • num++ / num ++ 보다 num += 1 이 더 바람직하다.
  • 단항 증감을 사용하지 않으면,
    • pre-incrementing/pre-decrementing 실수를 방지할 수 있다.
// bad
const array = [1, 2, 3];
let num = 1;
num++;
--num;
let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) {
let value = array[i];
sum += value;
if (value) {
truthyCount++;
}
}
// good
const array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;
const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;

= 할당문 전후로 줄바꿈 X, 줄바꿈이 필요하다면 () 사용#

  • 할당문 전후로 줄바꿈이 발생하면 난독화를 일으킬 수 있다.
// bad
const foo =
superLongLongLongLongLongLongLongLongFunctionName();
// bad
const foo
= 'superLongLongLongLongLongLongLongLongString';
// good
const foo = (
superLongLongLongLongLongLongLongLongFunctionName()
);
// good
const foo = 'superLongLongLongLongLongLongLongLongString';

사용하지 않은 변수는 비허용된다.#

  • 선언되었지만 사용되지 않은 변수는 리팩토링이 완전하게 되지 않았다는 의미이다.
  • 코드 공간을 불필요하게 차지함.
  • 읽는 사람에게 혼동을 줌.
// bad
var some_unused_var = 42;
// y 는 쓰여지기만 했지 사용되지 않았다.
var y = 10;
y = 5;
// 사용되지 않은 변수
var z = 0;
z = z + 1;
// 사용되지 않은 함수
function getX(x, y) {
return x;
}
// good
function getXPlusY(x, y) {
return x + y;
}
var x = 1;
var y = a + 2;
alert(getXPlusY(x, y));
// 나머지 프로퍼티 연산자: 객체에서 특정 키를 의도적으로 빠뜨리고 추출하는 방법이다.
// 'type' 은 사용하지 않아도 괜찮다.
var { type, ...coords } = data;
// 'coords' 는 data 객체에서 'type' 프로퍼티가 빠진 객체다.

Hoisting#

var, const/let 선언의 호이스팅:#

  • var
    • 선언문은 가장 가까운 함수 스코프의 최상단으로 호이스팅 된다.
    • 할당문은 호이스팅 되지 않는다.
  • const/let
    • 선언에는 Temporal Dead Zones (TDZ) 가 존재한다.
    • typeof 는 안전하지 않다. (예시 참고)
// 아래 함수는 참조 에러를 일으킨다 (notDefined 라는 전역 변수가 존재하지 않을 때)
function example() {
console.log(notDefined); // => throws a ReferenceError
}
// declaredButNotAssigned 는 호이스팅이 일어나기 때문에 사용가능하다.
// Note: 하지만 true 할당은 호이스팅 되지 않음.
function example() {
console.log(declaredButNotAssigned); // => undefined
var declaredButNotAssigned = true;
}
// 인터프리터는 변수의 선언을 스코프의 최상단으로 호이스팅 한다.
function example() {
let declaredButNotAssigned;
console.log(declaredButNotAssigned); // => undefined
declaredButNotAssigned = true;
}
// const / let 의 예시
function example() {
console.log(declaredButNotAssigned); // => throws a ReferenceError
console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
const declaredButNotAssigned = true;
}

14.2 익명함수 표현식의 호이스팅 : 변수 이름 O, 함수할당 X#

function example() {
console.log(anonymous); // => undefined
anonymous(); // => TypeError anonymous is not a function
var anonymous = function () {
console.log('anonymous function expression');
};
}

이름있는 함수 표현식의 호이스팅: 변수이름 O, 함수이름과 body X#

function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
superPower(); // => ReferenceError superPower is not defined
var named = function superPower() {
console.log('Flying');
};
}
// 할당된 변수이름과 함수 표현식의 이름기 같은 경우.
function example() {
console.log(named); // => undefined
named(); // => TypeError named is not a function
var named = function named() {
console.log('named');
};
}

함수 선언문의 호이스팅: 함수 이름, body O#

function example() {
superPower(); // => Flying
function superPower() {
console.log('Flying');
}
}

Comparison Operators & Equality#

(===) (!==) > (==)#

Conditional statements#

if 와 같은 조건문

  • ToBoolean 의 추상 메서드로 강제변환을 사용하여 식을 평가한다.
  • 식을 평가하는 규칙은 다음과 같다.
    • Objects -> true
    • Undefined -> false
    • Null -> false
    • Booleans -> true / false
    • Numbers
      • false : +0, -0, NaN
      • otherwise true
    • Strings
      • false : empty string ''
      • otherwise true
if ([0] && []) {
// true
// 배열은 객체이다. 빈객체도 객체임
// 객체는 항상 true
}

reference: boolean -> 축약 , 문자열/숫자 -> 명시적 비교#

// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}

Truth Equality and JavaScript by Angus Croll.🔗#

어휘 선언이 있는 case/default 문 : { } braces 사용#

  • Lexical declarations [어휘 선언]
    • let, const, function, and class
    • 스위치 블록 스코프가 존재한다.
    • case/default 에 { } 가 없다면 여러 case 절에서 동일한 것을 정의하려고 할 때 문제가 발생함.
// bad
switch (foo) {
case 1:
let x = 1;
break;
case 2:
const y = 2;
break;
case 3:
function f() {
// ...
}
break;
default:
class C {}
}
switch (1) {
case 1:
let v ;
break;
case 2:
let v; // Uncaught SyntaxError: Identifier 'v' has already been declared
break;
case 3:
function f() {
// ...
}
break;
default:
class C {}
}
// good
switch (foo) {
case 1: {
let x = 1;
break;
}
case 2: {
const y = 2;
break;
}
case 3: {
function f() {
// ...
}
break;
}
case 4:
bar();
break;
default: {
class C {}
}
}

삼항의 중첩 X : 기본적으로 단일행 표현식#

// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// split into 2 separated ternary(삼항) expressions
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

불필요한 삼항 표현식 X#

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;

혼합 연산자 : () 로 감싸기#

  • 혼합연산자는 우선순위가 모호할 수 있다.
  • +, -, ** 는 예외
  • /, * 는 모호 하다.
// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
const bar = a ** b - 5 % d;
// bad
// (a || b) && c 와 혼동될 수 있다.
if (a || b && c) {
return d;
}
// bad
const bar = a + b / c * d;
// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
// good
const bar = a ** b - (5 % d);
// good
if (a || (b && c)) {
return d;
}
// good
const bar = a + (b / c) * d;

Blocks#

여러줄의 블록 : {} 사용#

// bad
if (test)
return false;
// good
if (test) return false;
// good
if (test) {
return false;
}
// bad
function foo() { return false; }
// good
function bar() {
return false;
}

if/else 여러줄 블록 : if 의 닫기 } 와 같은 줄에 else 두기#

// bad
if (test) {
thing1();
thing2();
}
else {
thing3();
}
// good
if (test) {
thing1();
thing2();
} else {
thing3();
}

return 을 포함하는 if 블록 + else/else if#

  • return 을 포함하는 if 블록
    • 후속 else 불필요
    • 후속 else if 의 리턴 -> if 리턴으로 분리
// bad
function foo() {
if (x) {
return x;
} else {
return y;
}
}
// good
function foo() {
if (x) {
return x;
}
return y;
}
// bad
function cats() {
if (x) {
return x;
} else if (y) {
return y;
}
}
// good
function cats() {
if (x) {
return x;
}
if (y) {
return y;
}
}
// bad
function dogs() {
if (x) {
return x;
} else {
if (y) {
return y;
}
}
}
// good
function dogs(x) {
if (x) {
if (z) {
return y;
}
} else {
return z;
}
}

Control Statements#

  • if, while etc

제어문의 아주 긴 조건 : 줄바꿈, 논리연산은 새 줄에 시작#

  • 연산을 새 줄에 시작하는 것
    • 메서드 체이닝 패턴
    • 가독성
// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
thing1();
}
// bad
if (foo === 123 &&
bar === 'abc') {
thing1();
}
// bad
if (foo === 123
&& bar === 'abc') {
thing1();
}
// bad
if (
foo === 123 &&
bar === 'abc'
) {
thing1();
}
// good
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
// good
if (
(foo === 123 || bar === 'abc')
&& doesItLookGoodWhenItBecomesThatLong()
&& isThisReallyHappening()
) {
thing1();
}
// good
if (foo === 123 && bar === 'abc') {
thing1();
}

제어문 > 선택 연산자#

// bad
!isRunning && startRunning();
// good
if (!isRunning) {
startRunning();
}

Comments#

멀티라인 주석 /* ... / > //#

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

// : 한줄 주석#

  • 주석의 대상 위에 한줄로 표기
  • 주석 위에는 한 줄 비우기
    • 주석이 블록이 첫줄이 아닌경우 제외
// bad
const active = true; // is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// also good
function getType() {
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}

주석의 시작은 항상 공백#

  • 가독성
// bad
//is current tab
const active = true;
// good
// is current tab
const active = true;
// bad
/**
*make() returns a new element
*based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}
// good
/**
* make() returns a new element
* based on the passed-in tag name
*/
function make(tag) {
// ...
return element;
}

FIXME / TODO#

  • 실행 가능한 주석
  • FIXME: 재검토해야 할 문제를 지적
  • TODO: 구현해야하는 문제
class Calculator extends Abacus {
constructor() {
super();
// FIXME: 여기서 전역을 사용해서는 안됩니다.
total = 0;
}
}
class Calculator extends Abacus {
constructor() {
super();
// TODO: total은 옵션 매개 변수로 구성 할 수 있어야합니다.
this.total = 0;
}
}

Whitespace#

들여쓰기 indent : 2 space character#

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

space-before-blocks: 여는 { 의 앞에 공백 하나#

// bad
function test(){
console.log('test');
}
// good
function test() {
console.log('test');
}
// bad
dog.set('attr',{
age: '1 year',
breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
age: '1 year',
breed: 'Bernese Mountain Dog',
});

keyword-spacing : 제어문과 함수의 호출/선언#

  • 제어문 : 여는 ( 앞에 공백 하나
  • 함수 호출/선언: 여는 ( 앞에 공백 X
// bad
if(isJedi) {
fight ();
}
// good
if (isJedi) {
fight();
}
// bad
function fight () {
console.log ('Swooosh!');
}
// good
function fight() {
console.log('Swooosh!');
}

space-infix-ops : 연산자 사이 공백#

// bad
const x=y+5;
// good
const x = y + 5;

eol-last : 파일 마지막 - 하나의 newline(개행) 문자로 끝내기#

  • 비어 있지 않은 파일의 후행 줄 바꿈은 일반적인 UNIX 관용구입니다.
  • 후행 줄 바꿈의 이점은 쉘 프롬프트를 방해하지 않고 파일 및 출력 파일을 터미널에 연결하거나 추가하는 기능을 포함합니다.
// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;
// bad
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;
↵
import { es6 } from './AirbnbStyleGuide';
// ...
export default es6;↵

newline-per-chained-call 체이닝 마다 개행#

  • 긴 메서드 체이닝 (2개이상)
    • 들여쓰기
    • . dot 으로 시작하기
      • . 으로 시작하는 것 새로운 문이 아닌 메서드 호출이라는 것을 강조할 수 있다.
// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();
// bad
$('#items').
find('.selected').
highlight().
end().
find('.open').
updateCount();
// good
$('#items')
.find('.selected')
.highlight()
.end()
.find('.open')
.updateCount();
// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
.attr('width', (radius + margin) * 2).append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led')
.data(data)
.enter().append('svg:svg')
.classed('led', true)
.attr('width', (radius + margin) * 2)
.append('svg:g')
.attr('transform', `translate(${radius + margin},${radius + margin})`)
.call(tron.led);
// good
const leds = stage.selectAll('.led').data(data);

no-whitespace-before-property 🔗 프로퍼티 앞에 공백 X#

  • javascript 는 객체와 속성 사이의 공백을 허용한다.
    • 가독성을 저하하고 오류를 유발할 수 있다.
foo. bar .baz . quz
  • 점 주위 (), [] 괄호 앞에 공백을 쓰지 않아야 된다.
  • 체이닝의 개행에서만 허용 한다.
foo
.bar()
.baz()
.qux()
/*eslint no-whitespace-before-property: "error"*/
foo [bar] // foo.bar
foo. bar // foo[bar]
foo .bar // foo[ bar ]
foo. bar. baz // foo.bar.baz
foo. bar() // foo
.baz() // .bar().baz()
foo
.bar(). baz()
/*
foo
.bar()
.baz()
foo.
bar().
baz()
*/

블록 다음/ 다음 statement 앞 : 빈 줄#

if (foo) {
return bar;
}
return baz;
// good
if (foo) {
return bar;
}
return baz;
// bad
const obj = {
foo() {
},
bar() {
},
};
return obj;
// good
const obj = {
foo() {
},
bar() {
},
};
return obj;
// bad
const arr = [
function foo() {
},
function bar() {
},
];
return arr;
// good
const arr = [
function foo() {
},
function bar() {
},
];
return arr;

padded-blocks: 블록을 빈 줄로 채우지 말것#

// bad
function bar() {
console.log(foo);
}
// bad
if (baz) {
console.log(qux);
} else {
console.log(foo);
}
// bad
class Foo {
constructor(bar) {
this.bar = bar;
}
}
// good
function bar() {
console.log(foo);
}
// good
if (baz) {
console.log(qux);
} else {
console.log(foo);
}

no-multiple-empty-lines: 멀티라인 빈줄 X#

  • 공백은 코드의 논리적 섹션을 분리하는데 유용하지만 과도한 공백은 화면을 더 많이 차지 한다.
  • 코드를 읽을 때 필요한 스크롤을 줄이는 것을 목표로 한다.
// bad
class Person {
constructor(fullName, email, birthday) {
this.fullName = fullName;
this.email = email;
this.setAge(birthday);
}
setAge(birthday) {
const today = new Date();
const age = this.getAge(today, birthday);
this.age = age;
}
getAge(today, birthday) {
// ..
}
}
// good
class Person {
constructor(fullName, email, birthday) {
this.fullName = fullName;
this.email = email;
this.setAge(birthday);
}
setAge(birthday) {
const today = new Date();
const age = getAge(today, birthday);
this.age = age;
}
getAge(today, birthday) {
// ..
}
}

space-in-parens : ( ) 안에 공백 X#

// bad
function bar( foo ) {
return foo;
}
// good
function bar(foo) {
return foo;
}
// bad
if ( foo ) {
console.log(foo);
}
// good
if (foo) {
console.log(foo);
}
// bad
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
// good
foo('bar');
var x = (1 + 2) * 3;

array-bracket-spacing : [ ] 안에 공백 X#

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);
// good
const foo = [1, 2, 3];
console.log(foo[0]);

object-curly-spacing : { } 안에 공백 O#

// bad
const foo = {clark: 'kent'};
// good
const foo = { clark: 'kent' };

한줄에 100 자(공백 포함) 이상 X#

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
// good
const foo = jsonData
&& jsonData.foo
&& jsonData.foo.bar
&& jsonData.foo.bar.baz
&& jsonData.foo.bar.baz.quux
&& jsonData.foo.bar.baz.quux.xyzzy;
// good
$.ajax({
method: 'POST',
url: 'https://airbnb.com/',
data: { name: 'John' },
})
.done(() => console.log('Congratulations!'))
.fail(() => console.log('You have failed this city.'));

block-spacing : { 와 } 가 같은줄 : braces 내부 전후로 공백#

// bad
function foo() {return true;}
if (foo) { bar = 0;}
// good
function foo() { return true; }
if (foo) { bar = 0; }

comma-spacing : , 전에 공백 X / , 후 공백 O#

// bad
var foo = 1,bar = 2;
var arr = [1 , 2];
// good
var foo = 1, bar = 2;
var arr = [1, 2];

computed-property-spacing : 공백의 일관성#

  • 계산된 속성 : 공백을 넣거나 빼거나 둘중 하나로 통일해야 한다.
// bad
obj[foo ]
obj[ 'foo']
var x = {[ b ]: a}
obj[foo[ bar ]]
// good
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]

func-call-spacing : 함수 호출 공백 X#

// bad
func ();
func
();
// good
func();

key-spacing : 키 공백#

  • 개체 리터럴 속성에서 키와 값 사이의 간격
    • 키는 붙이고 value 는 띄운다.
// bad
var obj = { foo : 42 };
var obj2 = { foo:42 };
// good
var obj = { foo: 42 };

no-trailing-spaces : 줄 끝 후행 공백 X#

  • 후행 공백 : 공백, 탭 및 기타 유니 코드 공백 문자
  • 소스 제어 시스템에서 diff 로 플래그가 지정되는 문제점.
// bad
var foo = 0;//•••••
var baz = 5;//••
// good
var foo = 0;
var baz = 5;

no-multiple-empty-lines : 빈 멀티라인 X#

  • 오직 파일 끝 한줄의 개행 문자만 허용됨.
  • 파일 시작에 개행 문자 X
// bad - 빈 멀티라인
var x = 1;
var y = 2;
// bad - 파일끝에 두 줄 이상의 개행문자
var x = 1;
var y = 2;
// bad - 파일 시작에 하나 이상의 개행문자
var x = 1;
var y = 2;
// good
var x = 1;
var y = 2;

Commas#

comma-style: 컴마로 시작 X#

// bad
const story = [
once
, upon
, aTime
];
// good
const story = [
once,
upon,
aTime,
];
// bad
const hero = {
firstName: 'Ada'
, lastName: 'Lovelace'
, birthYear: 1815
, superPower: 'computers'
};
// good
const hero = {
firstName: 'Ada',
lastName: 'Lovelace',
birthYear: 1815,
superPower: 'computers',
};

comma-dangle : 마지막행 쉼표 -> 깨끗한 diff#

  • babel 과같은 트랜스컴파일러도 추가 후행쉼표를 제거해 준다.
// bad - git diff without trailing comma
const hero = {
firstName: 'Florence',
- lastName: 'Nightingale'
+ lastName: 'Nightingale',
+ inventorOf: ['coxcomb chart', 'modern nursing']
};
// good - git diff with trailing comma
const hero = {
firstName: 'Florence',
lastName: 'Nightingale',
+ inventorOf: ['coxcomb chart', 'modern nursing'],
};
// bad
const hero = {
firstName: 'Dana',
lastName: 'Scully'
};
const heroes = [
'Batman',
'Superman'
];
// good
const hero = {
firstName: 'Dana',
lastName: 'Scully',
};
const heroes = [
'Batman',
'Superman',
];
// bad
function createHero(
firstName,
lastName,
inventorOf
) {
// does nothing
}
// good
function createHero(
firstName,
lastName,
inventorOf,
) {
// does nothing
}
// good (rest 뒤에는 comma 가 없어야 한다)
function createHero(
firstName,
lastName,
inventorOf,
...heroArgs
) {
// does nothing
}
// bad
createHero(
firstName,
lastName,
inventorOf
);
// good
createHero(
firstName,
lastName,
inventorOf,
);
// good (note that a comma must not appear after a "rest" element)
createHero(
firstName,
lastName,
inventorOf,
...heroArgs
);

Semicolons#

semi 로 명시적으로 명령문 종료#

  • JavaScript 는 각 문 끝에 세미콜론이 필요하지 않음
  • 자동 세미콜론 삽입 (ASI): 대부분 JS 엔진, 세미콜론 위치 판단 -> 자동 추가
  • ASI 몇 가지 특이한 동작 -> 잘못 해석하면 코드가 깨진다.
  • ASI 의 시기를 알고, ESLint 가 이러한 잠재적으로 예상치 못한 경우로부터 코드를 보호하도록하는 것이 가장 좋습니다.
    • \n 문자는 아래에 해당하지 않을 때 세미콜론을 붙인다.
      1. 닫히지 않은 괄호 : (, [ , { paren, array literal, or object literal
      2. ., , 로 끝남
      3. 다음 토큰을 증가/감소 하는 --/++
      4. { 가 없는 : for(), while(), do, if(), else:
      5. 다음 줄이 [, (, +, *, /,-, ,, ., 으로 시작할 때
      6. some other binary operator that can only be found between two tokens in a single expression.
        • single expression 에서, 두 토큰 사이의 이항 연산자(?)
// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')
// bad - raises exception
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
// ...
}())
// bad - ASI, return 이 단독줄에 있을 때 `undefined` 를 반환함.
function foo() {
return
'search your feelings, you know it to be foo'
}
// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
jedi.father = 'vader';
});
// good
const reaction = "No! That’s impossible!";
(async function meanwhileOnTheFalcon() {
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
// ...
}());
// good
function foo() {
return 'search your feelings, you know it to be foo';
}

Type Casting & Coercion#

타입 캐스팅 & 강제 형변환

명령문의 시작부분에서 강제 형변환 하기#

no-new-wrappers : Strings#

  1. 원시형 래퍼 타입 : String, Number, Boolean 사용

    • 메서드와 같은 객체와 유사한 기능을 제공
    • var text = "Hello world".substring(2);
    • 연관된 래퍼 유형의 객체가 생성 된 다음 소멸된다.

  2. new wrapper instance

    var stringObject = new String("Hello world");
    var numberObject = new Number(33);
    var booleanObject = new Boolean(false);

  3. new wrapper String, Number, Boolean 를 사용하지 않는 것에 대한 사례

    var stringObject = new String("Hello world");
    console.log(typeof stringObject); // "object"
    var text = "Hello world";
    console.log(typeof text); // "string"
    var booleanObject = new Boolean(false);
    if (booleanObject) { // all objects are truthy!
    console.log("This executes");
    }
// => this.reviewScore = 9;
// bad
const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"
// bad
const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()
// bad
const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string
// good
const totalScore = String(this.reviewScore);

no-new-wrappers : Numbers#

const inputValue = '4';
// bad
const val = new Number(inputValue);
// bad
const val = +inputValue;
// bad
const val = inputValue >> 0;
// bad
const val = parseInt(inputValue);
// good
const val = Number(inputValue);
// good
const val = parseInt(inputValue, 10);

성능 Bitshift > parseInt#

// good
/**
* parseInt 가 코드상에서 느리게 작동한다면
* 문자열 -> 숫자 강제 변환 시 Bitshifting 가 많이 빠르다.
*/
const val = inputValue >> 0;

bitshift 주의점#

  • Numbers 는 64 bit 값
  • bitshift 는 32 bit integer 를 리턴함.
    • 32 bit Int, 2,147,483,647 보다 더 큰 값에서 예상치 못한 값으로 변환됌.
2147483647 >> 0; // => 2147483647
2147483648 >> 0; // => -2147483648
2147483649 >> 0; // => -2147483647

no-new-wrappers : Booleans#

const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;

Naming Conventions#

id-length : 이름 설명 > 한글자 이름#

// bad
function q() {
// ...
}
// good
function query() {
// ...
}

camelcase : naming objects, functions, instances.#

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

new-cap : 생성자 & 클래스 이름에만 PascalCase 사용#

// bad
function user(options) {
this.name = options.name;
}
const bad = new user({
name: 'nope',
});
// good
class User {
constructor(options) {
this.name = options.name;
}
}
const good = new User({
name: 'yup',
});

no-underscore-dangle : 후행/선행 밑줄 X#

  • 자바 스크립트는 속성이나 방법 측면에서 프라이버시 개념이 없다
  • 선행 밑줄은 "비공개"를 의미하는 일반적인 규칙이지만 실제로 이러한 속성은 완전히 공개되어 있다.
  • 이 규칙은 개발자가 변경 사항이 'breaking' 으로 간주되지 않거나 테스트가 필요하지 않다고 잘못 생각하게 만들 수 있다.
  • tl; dr : "비공개"상태를 원하는 경우 눈에 띄게 표시되지 않아야합니다.
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';
// good, in environments where WeakMaps are available
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

Function#bind : 화살표 함수 > reference 에 this 저장#

// bad
function foo() {
const self = this;
return function () {
console.log(self);
};
}
// bad
function foo() {
const that = this;
return function () {
console.log(that);
};
}
// good
function foo() {
return () => {
console.log(this);
};
}

default export as filename#

// file 1 contents
class CheckBox {
// ...
}
// PascalCase filename
export default CheckBox;
// file 2 contents camelCase filename
export default function fortyTwo() { return 42; }
// file 3 contents camelCase filename
export default function insideDirectory() {}
// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

camelCase : export-default a 함수#

function makeStyleGuide() {
// ...
}
export default makeStyleGuide;

PascalCase : export a 생성자 / 클래스 / singleton / 함수 라이브러리 / bare object#

const AirbnbStyleGuide = {
es6: {
},
};
export default AirbnbStyleGuide;

줄임말 / 이니셜 : 모두 대문자/소문자 일치#

// bad
import SmsContainer from './containers/SmsContainer';
// bad
const HttpRequests = [
// ...
];
// good
import SMSContainer from './containers/SMSContainer';
// good
const HTTPRequests = [
// ...
];
// also good
const httpRequests = [
// ...
];
// best
import TextMessageContainer from './containers/TextMessageContainer';
// best
const requests = [
// ...
];

optionally uppercase : export / const / can trust it to never change#

  • UPPERCASE_VARIABLES 는 프로그래머에게 변수 (및 해당 속성)가 변경되지 않도록 신뢰할 수 있음을 알려줌
  • exported 상수 외, 파일 내 상수에는 대문자를 사용하지 마십시오.
  • exported objects, 대문자를 사용하고 모든 중첩 속성이 변경되지 않도록 유지합니다.
// bad
const PRIVATE_VARIABLE = '파일 내에서 불필요하게 대문자를 사용해서는 안됩니다.';
// bad
export const THING_TO_BE_CHANGED = '분명히 대문자가 아니어야합니다';
// bad
export let REASSIGNABLE_VARIABLE = '대문자 변수와 함께 let을 사용하지 마십시오.';
// ---
// 허용되지만 의미 값을 제공하지 않습니다.
export const apiKey = 'SOMEKEY';
// 대부분의 경우 더 좋음
export const API_KEY = 'SOMEKEY';
// ---
// bad - 불필요한 대문자 키 : semantic 값인 경우에만 대문자.
export const MAPPING = {
KEY: 'value'
};
// good
export const MAPPING = {
key: 'value'
};

Accessors#

프로퍼티에 대한 접근자 함수는 불필요#

getters/setters -> unexpected side effects, test, maintain#

접근자 함수 만들기

// bad
class Dragon {
get age() {
// ...
}
set age(value) {
// ...
}
}
// good
class Dragon {
getAge() {
// ...
}
setAge(value) {
// ...
}
}

isVal() or hasVal() : boolean property/method#

// bad
if (!dragon.age()) {
return false;
}
// good
if (!dragon.hasAge()) {
return false;
}

일관성 있는 get() and set() functions#

class Jedi {
constructor(options = {}) {
const lightsaber = options.lightsaber || 'blue';
this.set('lightsaber', lightsaber);
}
set(key, val) {
this[key] = val;
}
get(key) {
return this[key];
}
}

Events#

이벤트에 data payload 추가 : object literal(hash) > raw value#

이벤트 페이로드에 더 많은 데이터를 추가 할 수 있습니다.

// bad
$(this).trigger('listingUpdated', listing.id);
// ...
$(this).on('listingUpdated', (e, listingID) => {
// do something with listingID
});
// good
$(this).trigger('listingUpdated', { listingID: listing.id });
// ...
$(this).on('listingUpdated', (e, data) => {
// do something with data.listingID
});

Standard Library#

Standard Library 는 기능적으로 손상되었지만 레거시 이유로 남아 있는 utilities 를 가지고 있다.

no-restricted-globals : Number.isNaN > global isNaN#

  • global isNaN
    • non-numbers 를 numbers 로 강제 변환 한다.
    • NaN을 강제하는 모든 것에 대해 true 를 반환
// bad
isNaN('1.2'); // false
isNaN('1.2.3'); // true
// good
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true

no-restricted-globals : Number.isFinite > global isFinite#

  • global isFinite
    • non-numbers 를 numbers 로 강제 변환 한다.
    • 유한 수로 강제되는 모든 것에 대해 true 를 반환
// bad
isFinite('2e3'); // true
// good
Number.isFinite('2e3'); // false
Number.isFinite(parseInt('2e3', 10)); // true

Testing#

function foo() {
return true;
}

No, but seriously

  • 많은 작은 순수 함수를 작성, mutation 이 발생하는 위치를 최소화
  • stubs / mocks 에 주의하기 - 테스트를 더 취약하게 만들 수 있음
  • Airbnb 는 주로 mocha / jest 사용, tape : 가끔 작은 개별 모듈에서 사용됨
  • 100 % 테스트 커버리지는 도달하기가 항상 실용적이지는 않더라도 노력하기에 좋은 목표입니다.
  • 버그를 수정할 때마다 회귀 테스트를 작성하십시오. 회귀 테스트없이 수정 된 버그는 거의 확실하게 향후 다시 break 될 것입니다.

Reference & Origin#

https://github.com/airbnb/javascript

Comments#

Last updated on